<!-- 订单 -->
<template>
  <view class="box">
    <view class="box1">
      <uv-tabs :list="list" @click="click"
        activeStyle="color: #1d8b8c;background-color: #fff;padding:6px 30px;border-radius: 50rpx;" lineColor="#1d8b8c"
        :scrollable="false" inactiveStyle="color: #fff;">
      </uv-tabs>
    </view>
    <!-- 商城订单 -->
    <view class="box12" v-if="current == 0">
      <uv-tabs :list="list1" @click="click1" activeStyle="color: #008c8c" lineColor="#008c8c"></uv-tabs>
      <view class="box2" v-if="current1 == 0">
        <view class="box21" v-for="(item, index) in shopList" :key="index" @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 1">
        <view class="box21" v-for="(item, index) in shopList" :key="index" v-show="item.text == '待支付'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 2">
        <view class="box21" v-for="(item, index) in shopList" :key="index" v-show="item.text == '待发货'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 3">
        <view class="box21" v-for="(item, index) in shopList" :key="index" v-show="item.text == '待自提'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 4">
        <view class="box21" v-for="(item, index) in shopList" :key="index" v-show="item.text == '待收货'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 5">
        <view class="box21" v-for="(item, index) in shopList" :key="index" v-show="item.text == '已完成'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{ item.price1 }}&nbsp;&nbsp;&nbsp;合计:￥{{ item.price2 }}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 服务订单 -->
    <view class="box12" v-if="current == 1">
      <uv-tabs :list="list2" @click="click1" activeStyle="color: #008c8c" lineColor="#008c8c">
      </uv-tabs>
      <view class="box2" v-if="current1 == 0">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 1">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '待支付'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 2">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '待接单'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 3">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '已接单'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 4">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '服务中'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 5">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '已完成'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 5">
        <view class="box21" v-for="(item, index) in shopList1" :key="index" v-show="item.text == '已完成'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{ item.name }}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{ item.text1 }}</view>
              <view style="color: #d44339;">￥{{ item.price }}</view>
            </view>
            <view class="box21-top3">
              {{ item.text }}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue';
const list = ref(
  [{
    name: '商城订单',
  }, {
    name: '服务订单',
  }]
)
const list1 = ref(
  [{
    name: '全部',
  }, {
    name: '待支付',
  }, {
    name: '待发货',
  }, {
    name: '待自提',
  }, {
    name: '待收货',
  }, {
    name: '已完成',
  }]
)
const list2 = ref(
  [{
    name: '全部',
  }, {
    name: '待支付',
  }, {
    name: '待接单',
  }, {
    name: '已接单',
  }, {
    name: '服务中',
  }, {
    name: '已完成',
  }]
)
const shopList = ref(
  [{
    id: 1,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待支付",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  {
    id: 2,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待发货",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/shipments/shipments'
  },
  {
    id: 3,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待自提",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/pickup/pickup'
  },
  {
    id: 4,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待收货",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  {
    id: 5,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "已完成",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  ]
)
const shopList1 = ref(
  [{
    id: 1,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待支付",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  {
    id: 2,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待接单",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  {
    id: 3,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "待确认",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },
  {
    id: 4,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "已接单",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/home/home'
  },
  {
    id: 5,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "服务中",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  },{
    id: 6,
    image: "/static/狗.png",
    name: '商品名称商品名称',
    text: "已完成",
    text1: "规格1",
    price: "125",
    price1: "0.00",
    price2: "120.00",
    url: '/pages/orders/payment/payment'
  }
  ]
)
const current = ref(0)
const click = ((item) => {
  // console.log('item', item);
  current.value = item.index
})
const current1 = ref(0)
const click1 = ((item1) => {
  // console.log('item1', item);
  current1.value = item1.index
})
const jump = ((e) => {
  // console.log(e);
  uni.navigateTo({
    url: e
  });
})
const jump1 = ((a) => {
  // console.log(e);
  uni.navigateTo({
    url: a
  });
})
</script>

<style lang="scss">
@import url("./orders.css")
</style>